<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		body,
		html {
			background-color: black;
		}

		.container {
			width: 600px;
			height: 600px;
			/* border: 1px solid; */
			display: flex;
			flex-wrap: wrap;
			margin: 100px auto;
		}

		.block {
			width: 31%;
			height: 33%;
			outline: 1px solid black;
			text-align: center;
			line-height: 200px;
			font-size: 14px;
			position: relative;
			margin-bottom: 5px;
			margin-right: 5px;
			background-color: gray;
		}

		span {
			position: absolute;
			display: block;
			left: 60px;
			top: 15px;
		}

		.block5 {
			/* background-color: skyblue; */
			cursor: pointer;
		}

		.circle {
			width: 160px;
			height: 160px;
			background-color: white;
			/* background-color: rgb(70, 81, 92); */
			border-radius: 50%;
			padding: 10px;
			margin-top: 5px;
			line-height: 160px;
			margin-left: 2px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="block1 block"><img src="./images/lottery_01.png" alt=""><span>京东卡10元</span></div>
		<div class="block2 block"><img src="./images/lottery_02.png" alt=""><span>京东卡20元</span></div>
		<div class="block3 block"><img src="./images/lottery_03.png" alt=""><span>京东卡30元</span></div>
		<div class="block4 block"><img src="./images/lottery_08.png" alt=""><span>iQOO Pro 手机</span></div>
		<div class="block5 block">
			<div class="circle">抽奖
			</div>
		</div>
		<div class="block6 block"><img src="./images/lottery_04.png" alt=""><span>京东卡100元</span></div>
		<div class="block7 block"><img src="./images/lottery_07.png" alt=""><span>京东卡500元</span></div>
		<div class="block8 block"><img src="./images/lottery_06.png" alt=""><span>京东卡200元</span></div>
		<div class="block9 block"><img src="./images/lottery_05.png" alt=""><span>谢谢参与</span></div>
	</div>
</body>

</html>

<script src="./animate.js"></script>
<script>
	// 需求：
	//  定义一个Game构造函数 （2分）
	//  在构造函数里添加程序所需要属性  （10分）
	//  高亮的边框至少绕着按钮转3圈，然后才能选择奖品（10分）
	//  在原型对象上添加所需的方法，例如产生指定范围的随机数（3分）
	//  点击"抽奖"按钮 ， 开始随机抽奖，高亮的边框，依次顺时针在奖品上切换，并设置按钮的文本为“进行中..”（15分）
	//  抽奖结束，提示中奖结果，重置显示"抽奖" （10分）

	var blocks = document.getElementsByClassName("block");
	var arr = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer;
	var rand = Math.floor(Math.random() * 8 + 50);
	var around = function () {
		for (let j = 0; j < arr.length; j++) {
			blocks[arr[j]].style.background = "gray";
		}
		blocks[arr[i]].style.background = "pink";
		i++;
		if (i === arr.length) {
			i = 0;
		}
		count++;
		if (count === 5 || count === 45) {
			clearInterval(stopTimer);
			stopTimer = setInterval(around, 200);
		}
		if (count === 10 || count === 35) {
			clearInterval(stopTimer);
			stopTimer = setInterval(around, 100);
		}
		if (count === 15) {
			clearInterval(stopTimer);
			stopTimer = setInterval(around, 50);
		}
		if (count === rand) {
			clearInterval(stopTimer);
		}
	}
	var start = function () {
		blocks[4].removeEventListener("click", start);
		stopTimer = setInterval(around, 300);
	}
	blocks[4].addEventListener("click", start);
</script>